<template>
    <el-drawer
      size="90v"
      :visible.sync="vis"
      :with-header="false"
      direction="btt"
      :append-to-body="true"
      :before-close="handleClose" style="margin: 0;padding: 0;">

        <div style="width: 100%;height: 32px;display: flex;background: #eeeeee">
          <span style="flex: 1;text-align: center;justify-content: center;display: flex; align-items: center;">{{title}}</span>
          <div style="text-align: center;justify-content: center;display: flex; align-items: center;margin-right: 4px;">

            <el-button  @click="newWindow" type="info" size="mini" icon="el-icon-monitor" plain></el-button>
            <el-button  @click="refresh" type="primary" size="mini" icon="el-icon-refresh-right" plain></el-button>
            <el-button  @click="toggleFullscreen" type="success" size="mini" icon="el-icon-full-screen" plain></el-button>
            <el-button  @click="handleClose" type="danger" size="mini"  icon="el-icon-close" plain></el-button>

          </div>
        </div>

        <div ref="target" class="fullscreen-content body_iframe" style="width: 100%;border: none; box-shadow: none;flex: 1;">
          <iframe :key="iframeKey" :src="href" style="width: 100%;height: 100%;border: none; box-shadow: none;background: #FFFFFF ;margin-bottom: -8px;"></iframe>
        </div>

    </el-drawer>
</template>

<script>
import CpuRamIoItem from "@/components/Dashboard/item/CpuRamIoItem/index.vue";
import DiskItem from "@/components/Dashboard/item/DiskItem/index.vue";
import MonitorItem from "@/components/Dashboard/item/MonitorItem/index.vue";
import DraggableWindow from "@/components/DraggableWindow/index.vue";
import HardwareItemBastion from "@/components/Dashboard/item/HardwareItem/bastion.vue";
import HardwareItemRoute from "@/components/Dashboard/item/HardwareItem/route.vue";
import HardwareItemUps from "@/components/Dashboard/item/HardwareItem/ups.vue";
import screenfull from 'screenfull';


export default {
  name: "dashboard_drawer_iframe",
  components: {
    HardwareItemUps,
    HardwareItemRoute,
    HardwareItemBastion, DraggableWindow, MonitorItem, DiskItem, CpuRamIoItem},
  props: {
    // titleP: {
    //   type: String,
    //   default: "抽屉"
    // },
    // visP: {
    //   type: Boolean,
    //   default: false
    // },
    // hrefP: {
    //   type: String,
    //   default: "/"
    // }
  },
  data() {
    return {
      vis: false,
      iframeKey: 0,
      title:"",
      href:""
    }
  },
  watch: {
    // visP: {
    //   deep: true,
    //   handler(val) {
    //     this.vis = val
    //   }
    // }
  },
  methods: {
    //关闭
    handleClose(done) {
      this.vis=false;
    },

    //全屏
    toggleFullscreen() {
      // 检查浏览器是否支持全屏API
      if (!screenfull.isEnabled) {
        this.$message.warning('您的浏览器不支持全屏功能');
        return;
      }

      // 切换目标元素的全屏状态
      screenfull.toggle(this.$refs.target);

      this.iframeKey += 1;

    },

    //刷新
    refresh(){
      this.iframeKey += 1
    },

    //新窗口打开
    newWindow(){
      window.open(this.href)
    },

    //开启
    open(title, href){
      this.vis=true;
      this.title=title;
      this.href=href;
    }
  },
  computed: {


  },
  filters: {

  }
}
</script>
<style scoped>

.body_iframe{
  height: calc(90vh - 32px);
}



</style>
